<template>
	<view class="flex-col page">
		<view class="flex-col group_4">
			<view class="flex-col list">

				<view class="flex-col list-item" v-for="(item,index) in list " :key="index">
					<view class="justify-between">
						<text class="text_1">{{item.materialTypeName}}</text>
						<view class="flex-row group_6">
							<image :src="imgUrl+'16557827823312767911.png'" class="image_7" />
							<text class="text_3" @click="clear(index)">清空清单</text>
						</view>
					</view>
					<view class="flex-col list_1">
						<template v-for="(it,i) in item.brand">
							<template v-for="(lt,li) in it.list">
								<view class="flex-col list-item_1">
									<view class="flex-row ">
										<image :src="lt.pic?lt.pic:imgUrl+'16557826684196968135.png'" class="image_9" />
										<!-- <image :src="lt.pic?lt.pic:pic" class="image_9" /> -->
										<view class="flex-col items-start group_9" v-if="lt.choiceId == 0">
											<text class="text_5">{{lt.productName}}</text>
											<text class="text_7">备注：{{lt.remarks}}</text>

										</view>
										<view class="flex-col items-start group_9" v-if="lt.choiceId == 1">
											<text class="text_5">{{lt.productName}}</text>
											<text class="text_7">规格：{{lt.specificationsId}}</text>
											<text class="materialModelId">型号：{{lt.materialModelId}}</text>

										</view>
									</view>
									<!-- <view class="justify-end group_10">
										<image @click="del(index,i,li)"
											src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827823310049882.png"
											class="image_11" />
										<image @click="go('/pages/consult/edit?index='+index+'&i='+i+'&li='+li)"
											src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827823323120655.png"
											class="image_11" />
									</view> -->
									<view class="justify-end group_10">
										<view class="image_11" @click="del(index,i,li)"><text class="font1">删除</text>
										</view>
										<view class="image_11"
											@click="go('/pages/consult/edit?index='+index+'&i='+i+'&li='+li)"><text
												class="font1">编辑</text></view>
									</view>
								</view>
							</template>
						</template>


					</view>
				</view>


			</view>
			<view class="justify-between section_3" v-if="coupon.length>0 && orderid==0" @click="couponShow=true">
				<text class="text_19">选择优惠券</text>
				<view class="flex-row">
					<text class="text_20">-¥{{couponAmount}}</text>
					<image :src="imgUrl+'16557868075783727961.png'" class="image_28" />
				</view>
			</view>
			<view class="justify-between section_4">
				<view class="flex-col group_21">
					<view class="flex-row">
						<text class="text_21">咨询费:</text>
						<view class="group_23">
							<text class="text_22">￥</text>
							<text class="text_23">{{money}}</text>
						</view>
					</view>
					<view class="flex-row">
						<text class="text_24">共 {{number}} 件</text>
						<text class="text_25">最多选择（100件）</text>
					</view>
				</view>
				<view class="flex-col items-center text-wrapper" @click="submit"><text class="text_26">提交清单</text>
				</view>
			</view>
		</view>
		<shop-coupon v-if="couponShow" :list="coupon" @confirm="couponConfirm" @close="couponShow=false"></shop-coupon>
	</view>
</template>

<script>
	export default {
		components: {},
	
		onShow()
		{
			this.init()
		},
		data() {
			return {
				pic: '',
				list: [],
				number: 0,
				money: 0,
				family: {},
				couponAmount: 0,
				couponShow: false,
				coupon_id: 0,
				coupon: [],
				orderid: 0,
				imgUrl: this.$IMG_URL,
			};
		},
		methods: {
			async init() {

				const brandID = uni.getStorageSync('brand') //本地存储数据
				console.log('pic', brandID);
				this.list = uni.getStorageSync('detailedLists');
				console.log("list1", this.list)
				this.orderid = uni.getStorageSync('orderid')

				this.list.forEach(item => {
					item.brand.forEach(it => {
						it.list.forEach(ll => {
							brandID.forEach(item => {
								if (item.brandId == ll.brandId) {
									this.pic = item.brandUrl
								}
							})
							if (ll.detailedPictures.length > 0) {
								ll.pic = ll.detailedPictures[0].detailedPictureUrl;
							} else {
								ll.pic = this.pic
							}
						})
					})
				})
				console.log('list2', this.list)

				await this.getCoupon();

				await this.getMoney();
			},
			getMoney() {
				this.$http('lhouse.query').then(r => {
					if (r.code == 200) {
						this.family = r.data.project;
						let number = 0;
						uni.getStorageSync('detailedLists').map(item => {
							console.log(item);
							item.brand.map(it => {
								number += it.list.length;
							})
						})

						this.number = number;
						this.$http('consult.calc', {
							areaId: this.family.district,
							number: number,
							couponsId: this.coupon_id
						}).then(r => {
							if (r.code == 200) {
								this.money = r.data;
							}
						});

					}
				});
			},
			getCoupon() {
				this.$http('coupon.coupon').then(r => {
					if (r.code == 200) {
						if (r.data) {
							this.coupon = r.data;
						}

					}
				});
			},
			couponConfirm(coupon) {
				let {
					coupon_id,
					amount
				} = coupon;

				this.coupon_id = coupon_id;
				this.couponAmount = amount;
				this.couponShow = false;
				this.getMoney()
			},
			clear(index) {

				let list = uni.getStorageSync('detailedLists');
				list.splice(index, 1);
				uni.setStorageSync('detailedLists', list);
				this.list = list;
				this.getMoney();
			},
			del(index, i, li) {
				let list = uni.getStorageSync('detailedLists');
				list[index].brand[i].list.splice(li, 1);
				uni.setStorageSync('detailedLists', list);
				this.list[index].brand[i].list.splice(li, 1);

				this.getMoney();
			},
			submit()
			// 提交清单
			{
				let arr = [];
				let list = uni.getStorageSync('detailedLists');
				list.map(item => {
					item.brand.map(it => {
						it.list.map(i => {
							i.detailedPictures.forEach(ii => {
								ii.detailedPictureUrl = ii.detailedPictureUrl;
							})
							arr.push(i);
						})
					})
				})

				let params = {
					projectId: this.family.projectId,
					money: this.money,
					detailedLists: arr
				}
				if (this.orderid) {
					params.ordersId = this.orderid;
				}
				if (!this.orderid) {
					this.$http('check.inqu', params).then(r => {
						if (r.code == 200) {
							uni.setStorageSync('detailedLists', []);
							uni.setStorageSync('brand', []);
							uni.setStorageSync('materialTypes', []);
							this.go('/pages/pay/pay?orderid=' + r.data);
							console.log('if',r);
						}
					});
				} else {
					this.$http('check.inserWholeProcess', params).then(r => {
						if (r.code == 200) {
							uni.setStorageSync('detailedLists', []);
							uni.setStorageSync('brand', []);
							uni.setStorageSync('materialTypes', []);
							uni.setStorageSync('orderid', '');
							this.go('/pages/my/order/order');
							
						}
					});
				}

			}
		},
	};
</script>

<style scoped lang="scss">
	.list-item {
		padding: 14.5px 11.5px 4px 12px;
		background-color: #ffffff;
		border-radius: 8px;
		margin-bottom: 20rpx;
	}

	.text_1 {
		font-weight: 800;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.group_6 {
		margin-top: 3px;
	}

	.list-item_1 {
		padding: 15px 0 11.5px;
	}

	.list-item_2 {
		padding: 15px 0 11.5px;
	}

	.image_7 {
		margin-top: 4px;
		flex-shrink: 0;
		width: 12px;
		height: 12px;
	}

	.text_3 {
		margin-top: 8rpx;
		margin-left: 8px;
		margin-bottom: 2px;
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.group_10 {
		margin-top: 11.5px;
	}

	.group_17 {
		margin-top: 11.5px;
	}

	.image_9 {
		border-radius: 8px;
		width: 80px;
		height: 80px;
		box-shadow: #d5d5d5 0px 0px 1px 0px;
	}

	.group_9 {
		margin-left: 12px;
	}

	.image_11 {
		margin-right: 12px;
		border-radius: 12px;
		width: 63px;
		height: 25px;
		font-size: 20rpx;
		background-color: #F6F7F9;
	}

	.font1 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.image_13 {
		border-radius: 12px;
		width: 63px;
		height: 25px;
	}

	.image_19 {
		border-radius: 8px;
		width: 80px;
		height: 80px;
	}

	.group_16 {
		margin-left: 12px;
	}

	.image_21 {
		margin-right: 12px;
		border-radius: 12px;
		width: 63px;
		height: 25px;
	}

	.image_23 {
		border-radius: 12px;
		width: 63px;
		height: 25px;
	}

	.text_5 {
		font-weight: 800;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_7 {
		margin-top: 18px;
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.materialModelId {
		margin-top: 9px;
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.text_13 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.text_15 {
		margin-top: 18px;
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group_4 {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.list {
		padding: 20rpx 24rpx 10rpx 20rpx;
	}

	.section_3 {
		padding: 14px 16px 16.5px;
		background-color: #ffffff;
	}

	.section_4 {
		padding: 8px 12px;
		background-color: #ffffff;
		box-shadow: 0px -0.5px 0px 0px #00000014;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.text_19 {
		margin-bottom: 3px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.group_20 {
		margin-top: 3px;
	}

	.group_21 {
		margin-bottom: 3px;
	}

	.text-wrapper {
		background-color: #1d6aff;
		border-radius: 18px;
		width: 110px;
		height: 36px;

	}

	.list_1 {
		margin-top: 5px;
	}

	.list_2 {
		margin-top: 5px;
	}

	.text_20 {
		color: #fe641a;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
		line-height: 16.5px;
	}

	.image_28 {
		margin: 1.5px 0 2px 11px;
		flex-shrink: 0;
		width: 7px;
		height: 13px;
	}

	.text_26 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';

	}

	.list-item_1:first-of-type {
		border-bottom: solid 0.5px #eeeeee;
	}

	.list-item_2:first-of-type {
		border-bottom: solid 0.5px #eeeeee;
	}

	.text_21 {
		margin: 4.5px 0 1.5px;
		color: #666666;
		font-size: 11px;
		font-family: '.AppleSystemUIFont';
		line-height: 13px;
	}

	.group_23 {
		margin-left: 3.5px;
		margin-right: 45px;
		height: 19px;
	}

	.text_24 {
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 14px;
	}

	.text_25 {
		margin-top: 5rpx;
		margin-left: 13px;
		color: #1c4ca8;
		font-size: 11px;
		font-family: '.AppleSystemUIFont';
		line-height: 13px;
	}

	.text_22 {
		color: #fe641a;
		font-size: 10px;
		font-family: '.AppleSystemUIFont';
		line-height: 11.5px;
	}

	.text_23 {
		color: #fe641a;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}
</style>
